<template>
	<view>
		<uni-nav-bar :statusBar="true" dark title="创建球队" fixed left-icon="left" @clickLeft="clickLeft">
		</uni-nav-bar>
		<view class="content">
			<uni-forms class="form" ref="baseForm" :modelValue="baseFormData" :rules="customRules">
				<uni-forms-item class="logo" labelWidth="180rpx" label="球队logo" >
					<uni-file-picker :autoUpload="false" limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
						file-mediatype="image" @progress="progress" @select="select">选择</uni-file-picker>
				</uni-forms-item>
				<uni-forms-item labelWidth="180rpx" label="球队名称" required name="teamName">
					<uni-easyinput v-model="baseFormData.teamName" placeholder="请输球队名称" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="bottomBtn">
			<button @click="onCreated" type="submit" class="submit">
				快速创建
			</button>
		</view>
	</view>
</template>

<script>
	import {
		uploadAvatar,
		createbasketballTeam,
		getImage
	} from '@/api/basketballTeam/index.js'
	export default {
		data() {
			return {
				baseFormData: {
					teamLogo: '',
					teamName: ''
				},
				imageStyles: {
					width: '100rpx',
					height: '100rpx',
					border: {
						radius: '50%'
					}
				},
				customRules: {
					teamName: {
						rules: [{
							required: true,
							errorMessage: '请输球队名称'
						}]
					},
				}
			}
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			select(e) {
				console.log('选择文件：', e)
				uploadAvatar({file: e.tempFiles[0].file}).then(res => {
					console.log(res, '---')
					this.baseFormData.teamLogo = res.data;
				})
			},
			onCreated() {
				let leagueId = uni.getStorageSync('contestId');
				this.$refs['baseForm'].validate().then(res => {
					createbasketballTeam({...this.baseFormData,leagueId: leagueId}).then(res => {
						this.$modal.msg(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 600)
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 40rpx 20rpx;

		.logo {
			display: flex;
			align-items: center;
			padding-bottom: 40rpx;
		}
	}
	.bottomBtn {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background-color: #fff;
		position: absolute;
		width: 100%;
		bottom: 0;
		padding: 40rpx 30rpx;
		padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
		border-top: 1px solid #eee;
		.submit-text {
			display: flex;
			
			font-size: 24rpx;
		}
		.submit {
			background-color: $btn-bg-color;
			color: #fff;
			width: 100%;
			font-size: 34rpx;
			font-weight: 800;
			margin-top: 20rpx;
		}
	}
</style>